<template>
	<!-- 小程序上边栏编写 -->
	<!-- 在微信小程序中，<view> 是一个基础组件，类似于 HTML 中的 <div> 或 <span>，
	用于定义视图容器。它是一个块级元素，可以用来布局页面内容、应用样式等。 -->
	<view class="nav">
		<view :style="'height:'+status+'rpx;'+containerSytle"></view>
		<!-- 编写上边栏的左侧 -->
		<!-- 坑注意需要display:flex展示居中要不然就会在下方展示 -->
		<view v-if="isHome" 
		class="headNav"
		:style="'height:'+navHeight+'rpx;line-height:'+navHeight + 'rpx;padding-left:20rpx;display:flex;justify-content:space-between;align-items:center;'">
					<text class="city">中部地区</text>
					<view style="flex:1">
						<!-- 页面跳转的两种方式 
						1.使用方法https://uniapp.dcloud.net.cn/api/router.htm
						2.使用标签:https://uniapp.dcloud.net.cn/component/navigator.html#navigator -->
						<navigator url="../../pages/search/index" 
						:style="getNavigatorStyle" >
							<text class="search-text">找医院</text>
						</navigator>
						
					</view>
				</view>
		
		<view class="navbar" :style="'height:'+navHeight+'rpx;'+containerSytle"
		v-if="!isHome">
			<view class="back-icon" @click="backOrHome">
				<!-- 自定义上边栏  左上角图标-->
				<image v-if="page > 1" src="../../static/resource/navbar/ic_back.png"></image>
				<image v-else src="../../static/resource/navbar/ic_home.png"></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style="'height:'+navHeight+'rpx;line-height:'+navHeight + 'rpx;'+textStyle">{{titleText}}</view>
			</view>
		</view>	
	</view>
</template>

<script setup>
	import { onBeforeMount,ref,defineProps,reactive,computed } from 'vue';
	
	onBeforeMount(() => {
	  setNavSize();
	  setStyle();
	  console.log('Menu:', menu);
	  console.log('Status:', status.value);
	});
	
	// prop组件使用：https://cn.vuejs.org/guide/components/props.html
	// 通知父组件事件 :(声明触发的事件) https://cn.vuejs.org/guide/components/events.html
	const props = defineProps({
		background:{
			type:String,
			// white color
			default:'rgba(255,255,255,1)'
		},
		color:{
			type:String,
			// black color
			default:'rgba(0,0,0,1)'
		},
		fontSize:{
			type:String,
			// rpx 即响应式 px : css预处理器支持-尺寸单位 :https://uniapp.dcloud.net.cn/tutorial/syntax-css.html
			//业界会以iphone6的尺寸375px为准,但rpx是以750px为准,所以计算数值的时候需要*2
			default:32
		},
		iconWidth:{
			type:String,
			// rpx 即响应式 px : css预处理器支持-尺寸单位 :https://uniapp.dcloud.net.cn/tutorial/syntax-css.html
			//业界会以iphone6的尺寸375px为准,但rpx是以750px为准,所以计算数值的时候需要*2
			default:116
		},
		iconHeight:{
			type:String,
			// rpx 即响应式 px : css预处理器支持-尺寸单位 :https://uniapp.dcloud.net.cn/tutorial/syntax-css.html
			//业界会以iphone6的尺寸375px为准,但rpx是以750px为准,所以计算数值的时候需要*2
			default:38
		},
		titleText:{
			type:String,
			default:''
		},
		isHome:{
			type:Boolean,
			default:false
		},
	})
	
	//状态栏高度
	const status = ref(0)
	//内容高度
	const navHeight = ref(0)
	//背景颜色
	const containerSytle = ref('')
	//字体样式
	const textStyle = ref('')
	//图标样式
	const iconStyle = ref('')
	//计算状态栏高度
	const setNavSize = () => {
	    try {
			//1.获取系统属性
			const systemParams = uni.getSystemInfoSync()
			console.log('systemParams:', systemParams)
	        const {system,statusBarHeight,osName} = uni.getSystemInfoSync()
			console.log('system:', system)
			console.log('statusBarHeight:', statusBarHeight)
			
			//2.设置状态栏高度
			status.value = statusBarHeight * 2
			
			//3.设置内容高度
			const isIos = osName.toLowerCase() === 'ios'
			if(!isIos){
				//直接赋值 rpx
				navHeight.value = 96
			}else{
				//ios手机存在刘海所以需要调整内容高度
				navHeight.value = 88
			}
			
	    } catch (error) {
	        console.error('Failed to get account info:', error);
	    }
	}
	
	//样式设置
	const setStyle = () => {
		containerSytle.value = ['background:' + props.background].join(';')
		textStyle.value = ['color:'+props.color,'font-size:'+props.fontSize+'rpx'].join(';')
		iconStyle.value = ['width:'+props.iconWidth+'rpx','height:'+props.iconHeight+'rpx'].join(';')
	}
	
	//页面栈数量:https://uniapp.dcloud.net.cn/api/window/window.html#getcurrentpages
	//通过当前页面栈数量就可以知道当前页面是回退会上一页还是返回首页
	const pages = ref(getCurrentPages().length)
	
	const backOrHome = () => {
		if(pages.value > 1){
			//跳转至上一页:https://uniapp.dcloud.net.cn/api/router.html#navigateback
			uni.navigateBack()
		}else{
			//返回首页就是需要关闭所有页面返回首页的tabBar页面,因为这个里面首页定义在了tabBar里面:
			//https://uniapp.dcloud.net.cn/api/router.html#switchtab
			//如果首页想要跳转应用内的页面使用:https://uniapp.dcloud.net.cn/api/router.html#navigateto
			//show case:如果从首页跳转到搜索页面那就使用navigateto
			uni.switchTab({
				url:'/pages/index/index'
			})
		}
	}
	
	// 编写上边栏中间搜索功能
	//因为搜索在中间,需要获取右边胶囊的位置: https://uniapp.dcloud.net.cn/api/ui/menuButton.html#getmenubuttonboundingclientrect
	const menu = reactive(uni.getMenuButtonBoundingClientRect())
	
	
	// 计算导航器的样式
	// const getNavigatorStyle = computed(() => {
	//   return `
	//     height: ${menu.height * 2}rpx;
	//     line-height: ${menu.height * 2}rpx;
	//     margin-top: ${(menu.top * 2 - status.value)}rpx;
	//     margin-left: 36rpx;
	//     margin-right: ${menu.width * 2 + 28}rpx; /* 减小右边距 */
	//     background: #f4f4f4;
	//     border-radius: 20rpx;
	//     text-align: center;
	//   `;
	// });
	
	// 计算导航器的样式
	const getNavigatorStyle = computed(() => {
		return `
		    height: ${menu.height * 2}rpx;
		    line-height: ${menu.height * 2}rpx;
		    margin-top: ${(menu.top * 2 - status.value)}rpx;
		    margin-left: 32rpx;
		    margin-right: ${menu.width * 2 + 24}rpx;
		    background: #f4f4f4;
		    border-radius: 20rpx;
		    text-align: center;
		  `;
	});
</script>

<style>

	.nav{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.back-icon{
		display: flex;
		align-items: center;
		width: 64rpx;
		height: 100%;
		margin-left: 20rpx;
	}
	.back-icon image{
		width: 72rpx;
		height: 72rpx;
	}
	.navbar{
		position: relative;
	}
	.nav-title {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			width: 100%; /* 确保宽度覆盖整个导航栏 */
		}
		.city {
		    display: inline-block;
		    position: relative;
		    font-size: 30rpx;
		    font-weight: bold;
		    padding-left: 55rpx;
		    background: url()
		        no-repeat left center;
		    background-size: 40rpx;
		}
		
		.city:after {
		    content: ' ';
		    display: inline-block;
		    height: 6px;
		    width: 6px;
		    border-width: 1px 1px 0 0;
		    border-color: #353535;
		    border-style: solid;
		    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		    position: relative;
		    top: -2px;
		    position: absolute;
		    top: 50%;
		    margin-top: -4px;
		    right: -10px;
		}
		.search-text {
		    display: inline-block;
		    padding-left: 30rpx;
		    color: #bbbbbb;
		    font-size: 26rpx;
		    background: url()
		        no-repeat left center;
		    background-size: 23rpx;
		}
		.nav2-list {
		    margin: 10rpx 20rpx 0 20rpx;
		}
		.nav2-list::after {
		    content: '';
		    display: block;
		    height: 0;
		    line-height: 0;
		    clear: both;
		    visibility: hidden;
		}
		.nav2-item {
		    float: left;
		    margin-top: 20rpx;
		    width: 50%;
		    text-align: center;
		    box-sizing: border-box;
		    padding: 0 5rpx;
		}
		.nav2-pic {
		    width: 100%;
		}
		.nav2-pic image {
		    display: block;
		    width: 100%;
		}
		.nav-list::after {
		    content: '';
		    display: block;
		    height: 0;
		    line-height: 0;
		    clear: both;
		    visibility: hidden;
		}
		.nav-item {
		    float: left;
		    margin-top: 20rpx;
		    width: 20%;
		    text-align: center;
		    padding: 10rpx 0;
		}
		.nav-pic image {
		    display: block;
		    margin: 0 auto;
		    width: 110rpx;
		    height: 110rpx;
		}
		.nav-text {
		    font-size: 24rpx;
		    font-weight: bold;
		    white-space: nowrap;
		    overflow: hidden;
		}
		
		.hosp-list {
		    margin: 10rpx 0 0 0;
		    background: none;
		}
		.hosp-list::before {
		    display: none;
		}
		.hosp-list::after {
		    display: none;
		}
		
		.hosp-item {
		    -webkit-box-align: stretch;
		    -webkit-align-items: stretch;
		    align-items: stretch;
		    padding: 20rpx;
		    margin: 20rpx;
		    border-radius: 10rpx;
		    overflow: hidden;
		    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04), 0 1px 6px 0 rgba(0, 0, 0, 0.04);
		}
		.hosp-item::before {
		    display: none;
		}
		.hosp-item::after {
		    display: none;
		}
		.hosp-name {
		    font-weight: bold;
		    font-size: 34rpx;
		}
		.hosp-avatar {
		    display: block;
		    width: 200rpx;
		    height: 180rpx;
		    border-radius: 10rpx;
		    overflow: hidden;
		    margin-right: 20rpx;
		}
		.hosp-line {
		    margin-top: 5rpx;
		}
		.hosp-line text {
		    font-size: 26rpx;
		}
		.hosp-rank {
		    font-weight: bold;
		    color: #0bb585;
		    margin-right: 15rpx;
		}
		.hosp-label {
		    font-weight: bold;
		    color: #0ca7ae;
		    margin-right: 15rpx;
		}
		.hosp-intro {
		    color: #999999;
		}
</style>